<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="文档名称" prop="docName">
        <el-input
          v-model="queryParams.docName"
          placeholder="请输入文档名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="文档编号" prop="docNumber">
        <el-input
          v-model="queryParams.docNumber"
          placeholder="请输入文档编号"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">取消搜索</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table
      ref="table"
      v-loading="loading"
      :data="docList"
      @selection-change="handleSelectionChange"
      row-key="docId"
      border
    >
      <!-- 多选框 -->
      <el-table-column type="selection" width="55" align="center" />

      <!-- 文档名称 -->
      <el-table-column label="文档名称" prop="docName" align="center" />

      <!-- 文档编号 -->
      <el-table-column label="文档编号" prop="docNumber" :sortable="true" align="center" />

      <!-- 文档发布版本 -->
      <!-- <el-table-column label="版本" prop="versionIdentifier" align="center"   /> -->

      <el-table-column
          label="发布版本" align="center"  prop="versionIdentifier">
          <template #default="{row}">
            <el-tag type="success" effect="dark">{{ row.versionIdentifier }}</el-tag>
          </template>
        </el-table-column>

      <!-- 文档迭代版本 -->
      <!-- <el-table-column label="文档迭代版本" prop="iterationIdentifier" align="center" /> -->

      <!-- 上次修改时间 -->
      <el-table-column label="上次修改时间" :sortable="true" prop="releaseTime" align="center">
        <template slot-scope="scope">
          {{ scope.row.releaseTime ? formatDate(scope.row.releaseTime) : '-' }}
        </template>
      </el-table-column>

      <!-- 所属组织 -->
      <el-table-column label="所属组织" prop="deptName" align="center" />

      <!-- 操作栏 -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
          <el-button type="text" @click="handleHistoryVersions(scope.row)">历史版本</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper"
    />
  </div>
</template>

<script>
import { listDoc } from '@/api/system/docdraw'; // 导入后端接口，需要根据实际情况修改路径
import moment from 'moment'; // 用于日期格式化

export default {
  name: 'DocManagement',
  data() {
    return {
      // 加载状态
      loading: true,
      // 文档列表
      docList: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        docName: undefined,
        docNumber: undefined
      },
      // 选中行的ID集合
      ids: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 获取文档列表 */
    getList() {
      this.loading = true;
      listDoc(this.queryParams)
        .then(response => {
          // 映射接口返回的字段到前端表格字段
          this.docList = response.rows.map(item => ({
            docId: item.docId, // 将 docMasterId 映射为 docId
            docMasterId : item.docMasterId,
            docName: item.docName,
            docNumber: item.docNumber,
            versionIdentifier: item.versionIdentifier+"."+item.iterationIdentifier,
            // iterationIdentifier: item.iterationIdentifier,
            releaseTime: item.releaseTime,
            deptName: item.deptName
          }));
          this.total = response.total;
          this.loading = false;
          // this.$message.success('文档查询成功');
        })
        .catch(error => {
          this.loading = false;
          this.$message.error('文档查询失败');
        });
    },
    /** 搜索按钮 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮 */
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.handleQuery();
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.docId);
    },
    /** 处理分页大小变化 */
    handleSizeChange(newSize) {
      this.queryParams.pageSize = newSize;
      this.getList();
    },
    /** 处理当前页码变化 */
    handleCurrentChange(newPage) {
      this.queryParams.pageNum = newPage;
      this.getList();
    },
    /** 历史版本按钮点击事件 */
   /** 历史版本跳转（正确位置） */
   handleHistoryVersions(row) {
      this.$router.push({
        path: '/historyData',
        query: { docMasterId: row.docMasterId } // 携带文档ID
      });
    },

     // 操作按钮
     handleDetail(row) {
            //打开新标签页
            this.$router.push({
                path: '/showDetails',
                query: { docId: row.docId } // 携带文档ID
            });
        },
    /** 日期格式化 */
    formatDate(date) {
      return moment(date).format('YYYY-MM-DD HH:mm:ss');
    }
  }





};
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.mb8 {
  margin-bottom: 8px;
}


</style>
